<template>
    <div>
        <el-form
            :model="user"
            ref="user"
            :rules="rule"
        >
            <el-form-item label="账号&nbsp;&nbsp;" :prop="'accountNO'" style="width: 50%">
                <el-input v-model="user.accountNo" placeholder="请输入" disabled></el-input>
            </el-form-item>
            <el-form-item label="项目名称" :prop="'projectName'" style="width: 50%">
                <el-input @change="openUpload()" v-model="user.projectName" placeholder="请输入项目名称"></el-input>
            </el-form-item>
            <el-form-item prop="projectDate" label="项目时间段" style="width: 50%">
                <el-date-picker
                    v-model="user.projectDate"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    range-separator="至"
                    clearable
                    value-format= YYYY-MM-DD
                />
            </el-form-item>
            <el-form-item label="项目职责" :prop="'projectDuty'" style="width: 50%">
                <el-input v-model="user.projectDuty" placeholder="请写项目职责"></el-input>
            </el-form-item>
            <el-form-item label="项目管理" :prop="'projectManage'" style="width: 50%">
                <el-input v-model="user.projectManage" placeholder="请写项目管理"></el-input>
            </el-form-item>
            <el-form-item label="备注" :prop="'remark'" style="width: 50%">
                <el-input v-model="user.remark" placeholder="请输入备注"></el-input>
            </el-form-item>
            <el-form-item style="width: 50%">
                <el-button type="primary" @click="update('user')">提交</el-button>
                <el-button @click="goBack('user')">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>




<script>
import Information from "@/template/Information.vue";
import {serverIp} from "../../../public/static/config.js";
import request from "@/util/request.js";
import aes from "@/util/aes.js";


export default {
    components: {Information},
    data(){
        return{
            serverIp: serverIp, //附件上传路径
            showUpload : false,
            lookUpdate : false,
            getNo:{},
            headerObject:{
                "account" : JSON.parse(localStorage.getItem('user')).accountNo,
                "token" : JSON.parse(localStorage.getItem('user')).token
            },
            user: {
                classNo:"",
                projectName : "",
                accountNo: "",
                remark: "",
                projectDuty: "",
                fileNo :"",
                projectManage :"",
                id:"",
                projectDate: [] // 使用数组来存储日期范围
            },
            rule: {
                projectName: [
                    { required: true, message: '请输入项目名称', trigger: 'blur' },
                ],
                projectDuty:[
                    { required: true, message: '请输入项目职位', trigger: 'blur' },
                ],
                projectDate: [
                    { type: 'array', required: true, message: '请选择项目时间段', trigger: 'change' }
                ],
                projectManage: [
                    { required: true, message: '请输入项目职责', trigger: 'blur' }
                ],
            },
        }
    },
    //初始方法
    created() {
        //获得当前用户的AccountNo
        this.getAccountNo();
    },
    methods:{
        update(val) {
            this.$refs[val].validate((valid) => {
                if (valid) {
                    request.post("/related_project/edit", this.user).then(res => {
                        if (res.data.code === '200') {
                            this.$alert('提交成功', '提交成功', {
                                confirmButtonText: '确定',
                            }).then(() => {
                                location.reload()
                            });
                        }
                    });
                } else {
                    console.log("表单验证失败，请检查输入");
                }
            });
        },
        goBack(){
            this.user.projectName = ""
            this.user.projectDuty = ""
            this.user.projectDate = []
            this.user.remark = ""
            this.user.projectManage = ""
        },

        //获取accountNo
        getAccountNo(){
            this.user.accountNo = JSON.parse(localStorage.getItem('user')).accountNo;
        },
        openUpload() {
            //是否展示班次类型；开班展示，结束隐藏
            if (this.user.projectName != "") {
                this.showUpload = true;
            }else if(this.user.projectName = ""){
                this.showUpload = false;
            }
        },
    }
}

</script>


<style>
/* 基本样式 */
.el-form-item {
    width: 100%; /* 让表单项占满容器宽度 */
}

/* 媒体查询，根据不同屏幕宽度调整样式 */
@media (max-width: 600px) {
    .date-picker-responsive {
        width: 100%; /* 小屏幕设备上占满可用宽度 */
    }
}

@media (min-width: 601px) and (max-width: 1024px) {
    .date-picker-responsive {
        width: 80%; /* 中等屏幕设备上稍微缩小 */
    }
}

@media (min-width: 1025px) {
    .date-picker-responsive {
        width: 60%; /* 大屏幕设备上进一步缩小 */
    }
}
</style>
